<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.servletContext.contextPath}/css/index.css">
    <link rel="stylesheet" href="${pageContext.servletContext.contextPath}/css/custom.css">
    <link rel="stylesheet" href="${pageContext.servletContext.contextPath}/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="${pageContext.servletContext.contextPath}/js/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="${pageContext.servletContext.contextPath}/js/wangEditor/wangEditor.css">
    <style>
        .preview {
            width: 480px;
            height: 270px;
            padding: 0;
            margin-left: 15px;
            overflow: hidden;
            position: relative;
        }

        .preview:hover .cover {
            background-color: rgba(0, 0, 0, 0.4);
        }

        .preview:hover .fa-upload {
            color: rgba(240, 240, 240, 0.8);
        }

        #upfile {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 9;
            width: 100%;
            height: 100%;
            opacity: 0;
        }

        .cover {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 270px;
            font-size: 40px;
            background-color: rgba(0, 0, 0, 0);
            transition: all 0.3s;
        }

        .fa-upload {
            color: rgba(240, 240, 240, 0);
        }
        .main_left{
            width: 200px;
            height: 100%;
            float: left;
        }
        .main_right{
            width: 1700px;
            height: 100%;
            float: left;
            background: white;
        }
    </style>
</head>

<body>

<div class="main_left">
    <jsp:include page="admin_aside.jsp"></jsp:include>
</div>
<div class="main_right">

    <div class="container-fluid"  style="margin-bottom: 80px; margin-top: 20px">
        <div class="body advert">
            <!-- 面包屑 -->
            <ol class="breadcrumb"  style="margin-bottom: 0;height: 50px; padding-top: 15px;">
                <li>资源列表</li>
                <li class="active">添加资源</li>
            </ol>
            <div class="advert-add" style="overflow:hidden; margin-top: 20px;">
                <form id="source_form" action="/api/auth/source/add" method="post" class="form-horizontal"
                      enctype="multipart/form-data">
                    <div class="form-group">
                        <label for="title" class="col-md-3 control-label">标题</label>
                        <div class="col-md-5">
                            <input id="title" name="title" type="text" class="form-control input-sm"
                                   placeholder="请填写文章标题" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">封面</label>
                        <div class="col-md-2 preview">
                            <img id="image_url" src="./images/course.jpg" style="border: 1px solid #e0e0e0;">
                            <input type="file" id="upfile" name="cover">
                            <div class="cover">
                                <i class="fa fa-upload"></i>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="" class="col-md-3 control-label">内容</label>
                        <div class="col-md-8" id="editor"></div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-8">
                            <input type="submit" class="btn btn-danger btn-sm pull-right" value="添加资源">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

</body>
<script src="./js/jquery.js"></script>
<script src="./js/wangEditor/wangEditor.js"></script>
<script>
    $(function () {
        var cate = window.location.pathname.charAt(window.location.pathname.length - 1);
        // console.log(cate);
        // 1. 生成一个富文本编辑器
        var E = window.wangEditor;
        var editor = new E('#editor');
        // 禁用插入iframe链接的功能
        editor.customConfig.insertIframeVideo = false;

        // 限制上传视频的大小， 默认为KB为单位
        editor.customConfig.uploadVideoMaxSize = 100 * 1024 * 1024;

        // 一次最多上传视频个数，默认为10
        editor.customConfig.uploadVideoMaxLength = 10;

        // 检查插入的视频链接,返回 true 表示校验成功,返回字符串表示检验失败，字符串为失败信息
        editor.customConfig.linkVideoCheck = url => url.startsWith('http');

        // 定制视频上传函数，只有定义该函数，才会显示上传视频按钮
        editor.customConfig.customUploadVideo = function (media, insert) {
            console.log(media);
            var videoFile = media[0];
            // 3. 上传视频
            if (media.length > 0) {
                // 4. 生成formData对象
                var formData = new FormData();
                formData.append('upload_video', videoFile);

                $.ajax({
                    url: '/api/auth/source/upload_video',
                    type: 'post',
                    processData: false, // 不要处理转化成一个查询字符串
                    contentType: false,
                    data: formData,
                    success: function (result) {
                        if (result.status === 1) {
                            insert(result.data);
                        } else {
                            alert('插入视频失败!');
                        }
                    }
                });
            }
        };
        editor.customConfig.customUploadImg = function (files, insert) {
            // 2. 获取文件
            var imgFile = files[0];
            console.log(files);
            // 3. 上传图片
            if (files.length > 0) {
                // 4. 生成formData对象
                var formData = new FormData();
                formData.append('upload_img', imgFile);

                $.ajax({
                    url: '/api/auth/source/upload_img',
                    type: 'post',
                    processData: false, // 不要处理转化成一个查询字符串
                    contentType: false,
                    data: formData,
                    success: function (result) {
                        if (result.status === 1) {
                            insert(result.data);
                        } else {
                            alert('插入图片失败!');
                        }
                    }
                });
            }
        };
        editor.create();

        // 2. 处理图片的本地展示
        $('#upfile').on('change', function () {
            // 1.1 取出本地的文件
            var imgFile = this.files[0];
            console.log(imgFile);
            // 1.2 文件阅读对象
            var fileReader = new FileReader();
            fileReader.readAsDataURL(imgFile);
            // 1.3 文件读取完毕
            fileReader.onloadend = function () {
                $('#image_url').attr('src', this.result);
            }
        });

        // 3. 发起ajax请求
        $('#source_form').submit(function () {
            // 2.1 创建FormData对象
            let formData = new FormData(this);

            // 2.2 容错验证
            if (formData.get('cover').size === 0) {
                alert('请上传图片!');
                return false;
            }

            // 2.3 取出文章内容
            formData.append('body', editor.txt.html());
            formData.append('cate', cate);

            // 2.3 发起请求
            $.ajax({
                url: $(this).attr('action'),
                type: $(this).attr('method'),
                processData: false, // 不要处理转化成一个查询字符串
                contentType: false,
                data: formData,
                success: function (result) {
                    if (result.status === 1) {
                        alert('添加成功!');
                        // 返回上一级界面
                        window.location.href = '/back/source_list/' + cate;
                    } else {
                        alert('添加失败!');
                    }
                }
            });
            // 阻止默认提交
            return false;
        });
    })
</script>
</html>